Frontend Dizayn Tokenlari: Global Ilovalar Uchun Kross-platform Dizayn Tizimini Yaratish

Raqamli mahsulotlarni ishlab chiqishning doimiy o'zgaruvchan landshaftida turli platformalarda izchil va kengaytiriladigan foydalanuvchi interfeyslarini (UI) yaratish juda muhimdir. Yaxshi aniqlangan dizayn tizimi bu izchillikning asosidir va dizayn tokenlari uni hayotga tatbiq etuvchi qurilish bloklaridir. Ushbu keng qamrovli qo'llanma frontend dizayn tokenlari dunyosini o'rganadi, ularning kross-platform dizayn tizimlari uchun joriy etilishiga e'tibor qaratadi va ular global ilovalaringizga qanday foyda keltirishi mumkinligini ko'rsatadi.

Dizayn Tokenlari Nima?

Dizayn tokenlari - bu dizayn atributlarini saqlaydigan nomlangan obyektlardir. Ular ranglar, masofalar, tipografiya va hatto animatsiya davomiyligi kabi fundamental dizayn qarorlarini ifodalaydi. Ushbu qiymatlarni kodingiz bo'ylab qattiq kodlash o'rniga, siz dizayn tokenlaridan foydalanasiz, bu esa dizayn tilingiz uchun yagona haqiqat manbasini ta'minlaydi. Ushbu yondashuv, ayniqsa, keng ko'lamli loyihalar va kross-platform ilovalari uchun bir qancha afzalliklarni taqdim etadi.

'primary-brand' rangini ko'rib chiqaylik. Hamma joyda '#007BFF' hex kodini ishlatish o'rniga, siz, masalan, 'color-brand-primary' deb nomlangan dizayn tokenini yaratasiz va unga '#007BFF' qiymatini belgilaysiz. Keyin, siz tokeni CSS, JavaScript va boshqa ilova kodingizda ishlatasiz. Agar siz asosiy brend rangini o'zgartirishingiz kerak bo'lsa, faqatgina tokenni yangilashingiz kifoya qiladi va o'zgarish butun ilovangiz bo'ylab tarqaladi.

Nima Uchun Dizayn Tokenlaridan Foydalanish Kerak? Asosiy Afzalliklari

• Muvofiqlik: Barcha platformalar va qurilmalarda yagona ko'rinish va hissiyotni ta'minlaydi. Endi nomuvofiqliklar yo'q!
• Kengaytiriluvchanlik: Mahsulotingiz rivojlanishi bilan dizayn elementlarini boshqarish va yangilashni osonlashtiradi.
• Qo'llab-quvvatlash qulayligi: Dizayn o'zgarishlarini amalga oshirish uchun talab qilinadigan kuchni kamaytiradi, chunki siz butun kod bazasini emas, faqat tokenlarni yangilashingiz kerak bo'ladi.
• Mavzulashtirish va Moslashtirish: Bir nechta mavzular (masalan, yorug' va qorong'u rejim) yaratish yoki foydalanuvchilarga UI-ni moslashtirish imkonini beradi.
• Yaxshilangan Hamkorlik: Umumiy tildan foydalangan holda dizaynerlar va ishlab chiquvchilar o'rtasida yaxshiroq muloqotni rag'batlantiradi.
• Qulaylik (Accessibility): Rang kontrasti sozlamalari kabi qulaylik xususiyatlarini joriy qilishni soddalashtiradi.
• Samaradorlik: Qayta foydalanish mumkin bo'lgan dizayn komponentlari va qiymatlari to'plamini taqdim etish orqali ishlab chiqish vaqtini qisqartiradi.
• Internatsionalizatsiya (i18n) ni qo'llab-quvvatlash: Dizayn qarorlarini tilga xos matndan ajratish orqali ilovangizni turli tillar va madaniyatlarga moslashtirishni osonlashtiradi.

Dizayn Tokenlarini Joriy Qilish: Amaliy Qo'llanma

Dizayn tokenlarini joriy qilish tokenlarni aniqlashdan tortib, ularni kodingizga integratsiya qilishgacha bo'lgan bir necha bosqichlarni o'z ichiga oladi.

1. Tokenlaringizni Aniqlash

Birinchi qadam - sizga kerak bo'lgan tokenlarni aniqlashdir. Bu jarayon siz ifodalashni istagan dizayn elementlarini aniqlash va ularni mos ravishda nomlashni o'z ichiga oladi. Ushbu kategoriyalarni ko'rib chiqing:

• Ranglar: Asosiy, ikkinchi darajali, fon, matn, muvaffaqiyat, xato, ogohlantirish, ma'lumot va hokazo.
• Tipografiya: Shrift oilalari, shrift o'lchamlari, shrift vaznlari, qator balandliklari, harflar orasidagi masofa va hokazo.
• Masofalar: Ichki (padding), tashqi (margin), elementlar orasidagi bo'shliqlar. Muvofiq shkaladan foydalanishni o'ylab ko'ring (masalan, 4px, 8px, 16px, 24px).
• Chegara: Kenglik, uslub, rang.
• Chegara Radiusi: Yumaloq burchaklar uchun.
• Soyalar: Chuqurlik va vizual iyerarxiya uchun.
• Animatsiya Davomiyligi va Yengilligi: Silliq o'tishlar va foydalanuvchi fikr-mulohazalari uchun.
• Z-index: Elementlarning bir-birining ustida joylashish tartibini boshqarish.
• Balandlik (Elevation): UI elementlarining vizual balandligini boshqarish.

Tokenlarni nomlashda izchil va tushunarli nomlash qoidasidan foydalaning. Umumiy naqsh: <kategoriya>-<xususiyat>-<qiymat> yoki <komponent>-<xususiyat>. Masalan: color-brand-primary font-size-base spacing-small border-radius-medium

Token Ta'riflariga Misol (JSON):

            {
  "color": {
    "brand": {
      "primary": "#007BFF",
      "secondary": "#6C757D"
    },
    "background": {
      "default": "#FFFFFF",
      "alt": "#F8F9FA"
    },
    "text": {
      "primary": "#212529",
      "secondary": "#6C757D"
    },
    "success": "#28A745",
    "error": "#DC3545",
    "warning": "#FFC107",
    "info": "#17A2B8"
  },
  "font": {
    "family": {
      "base": "Helvetica, Arial, sans-serif"
    },
    "size": {
      "base": "16px",
      "small": "14px",
      "large": "18px"
    },
    "weight": {
      "normal": "400",
      "bold": "700"
    },
    "line-height": {
      "base": "1.5"
    }
  },
  "spacing": {
    "small": "8px",
    "medium": "16px",
    "large": "24px"
  },
  "border-radius": {
    "small": "4px",
    "medium": "8px",
    "large": "12px"
  },
  "shadow": {
    "default": "0px 2px 4px rgba(0, 0, 0, 0.1)"
  }
}
            

              
                Copy
              
            
          

2. Texnologiya va Asboblarni Tanlash

Bir nechta texnologiya va vositalar dizayn tokenlarini samarali boshqarishga yordam beradi. Eng yaxshi tanlov loyihangiz talablariga va mavjud texnologiyalar to'plamiga bog'liq. Mana bir nechta mashhur variantlar:

• CSS O'zgaruvchilari (Custom Properties): Qiymatlarni aniqlash va qayta ishlatish imkonini beruvchi mahalliy CSS xususiyati. Mavzulashtirish va CSS-da to'g'ridan-to'g'ri foydalanish uchun a'lo darajada.
• CSS preprosessorlari (Sass, Less): Dizayn tokenlarini boshqarish uchun o'zgaruvchilar, miksinlar va funksiyalar kabi xususiyatlarni taqdim etadi.
• JavaScript kutubxonalari/paketlari (masalan, Style Dictionary, Theo): Dizayn tokenlarini turli formatlarga (CSS, JavaScript, iOS, Android) o'zgartirish va hujjatlarni yaratish uchun kuchli vositalar.
• Dizayn tokenlarini boshqarish platformalari (masalan, Figma Tokens, zeroheight): Dizayn tokenlarini aniqlash, boshqarish va eksport qilish uchun hamkorlik vositalarini taklif qiladi.

Misol: CSS O'zgaruvchilari Yordamida Dizayn Tokenlarini Joriy Qilish

Avval CSS o'zgaruvchilaringizni CSS-da aniqlang (odatda global uslublar jadvalida yoki komponentning uslub faylida):

            :root {
  --color-brand-primary: #007BFF;
  --color-brand-secondary: #6C757D;
  --color-text-primary: #212529;
  --color-background-default: #FFFFFF;
  --font-family-base: Helvetica, Arial, sans-serif;
  --font-size-base: 16px;
  --spacing-small: 8px;
  --spacing-medium: 16px;
}

            

              
                Copy
              
            
          

Keyin, o'zgaruvchilarni CSS qoidalaringizda ishlating:

            .button {
  background-color: var(--color-brand-primary);
  color: var(--color-text-primary);
  padding: var(--spacing-medium);
  border-radius: var(--spacing-small);
}

h1 {
  font-family: var(--font-family-base);
  font-size: var(--font-size-large);
  color: var(--color-brand-primary);
}

            

              
                Copy
              
            
          

Misol: Style Dictionary (JavaScript) Yordamida Dizayn Tokenlarini Joriy Qilish

1. Style Dictionary-ni o'rnatish: npm install style-dictionary --save-dev

2. Konfiguratsiya faylini yaratish (config.json):

            {
  "source": [
    "tokens/**/*.json"
  ],
  "platforms": {
    "css": {
      "transformGroup": "css",
      "buildPath": "dist/",
      "files": [{
        "destination": "variables.css",
        "format": "css/variables"
      }]
    },
    "js": {
      "transformGroup": "js",
      "buildPath": "dist/",
      "files": [{
        "destination": "tokens.js",
        "format": "javascript/es6"
      }]
    }
  }
}

            

              
                Copy
              
            
          

3. Token ta'rifi fayllaringiz uchun katalog yarating (masalan, tokens) va tokenlaringizni JSON fayllarida aniqlang (masalan, tokens/color.json, tokens/typography.json):

            // tokens/color.json
{
  "color": {
    "brand": {
      "primary": {
        "value": "#007BFF",
        "description": "Asosiy brend rangi"
      },
      "secondary": {
        "value": "#6C757D",
        "description": "Ikkilamchi brend rangi"
      }
    },
    "text": {
      "primary": {
        "value": "#212529",
        "description": "Asosiy matn rangi"
      }
    }
  }
}

            

              
                Copy
              
            
          

4. Style Dictionary-ni ishga tushiring: npx style-dictionary build

5. Yaratilgan Fayllarni Import Qilish va Ishlatish:

            // Yaratilgan CSS faylini HTML yoki CSS faylingizda import qiling
<link rel="stylesheet" href="dist/variables.css">

// JavaScript tokenlar faylini import qiling
import * as tokens from './dist/tokens.js';

// Tokenlarni JavaScript-da ishlating (masalan, dinamik uslublash uchun yoki React komponentlarida)
const buttonStyle = {
  backgroundColor: tokens.color.brand.primary.value,
  color: tokens.color.text.primary.value,
  // ... boshqa uslublar
};

            

              
                Copy
              
            
          

3. Tokenlarni Kodingizga Integratsiya Qilish

Tokenlaringizni aniqlab, texnologiyani tanlaganingizdan so'ng, ularni kodingizga integratsiya qiling. Bu odatda quyidagilarni o'z ichiga oladi:

• CSS o'zgaruvchilarini to'g'ridan-to'g'ri CSS-da ishlatish. (CSS O'zgaruvchilari misolida ko'rsatilganidek)
• Agar tokenlaringizdan JavaScript fayllarini yaratsangiz, JavaScript o'zgaruvchilari yoki konstantalaridan foydalanish.
• CSS-da preprosessor o'zgaruvchilarini (Sass, Less) ishlatish.
• Dizayn tokenlarini qo'llab-quvvatlaydigan dizayn tizimi komponent kutubxonalaridan (masalan, Material UI, Ant Design) foydalanish.

Misol: CSS O'zgaruvchilaridan Foydalanib React-ga Tokenlarni Integratsiya Qilish

            import React from 'react';
import './Button.css'; // CSS o'zgaruvchilari bilan CSS faylini import qiling

function Button({ children, variant = 'primary' }) {
  return (
    <button className={`button button--${variant}`}>
      {children}
    </button>
  );
}

export default Button;

            

              
                Copy
              
            
          

Button.css:

            .button {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  border: none;
  padding: var(--spacing-medium) var(--spacing-large);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  color: var(--color-text-primary);
}

.button--primary {
  background-color: var(--color-brand-primary);
  color: var(--color-background-default);
}

.button--secondary {
  background-color: var(--color-brand-secondary);
  color: var(--color-background-default);
}

            

              
                Copy
              
            
          

4. Dizayn Tokenlaringizni Qo'llab-quvvatlash va Rivojlantirish

Dizayn tokenlari "bir marta o'rnatib, unutish" yechimi emas. Ularni vaqt o'tishi bilan qo'llab-quvvatlashingiz va rivojlantirishingiz kerak bo'ladi. Bu quyidagilarni o'z ichiga oladi:

• Dizayn tizimingiz rivojlanishi bilan tokenlarni ko'rib chiqish va yangilash.
• Tokenlaringizni, shu jumladan ularning maqsadi va ishlatilishini aniq hujjatlashtirish. (Token ta'riflaringizdan avtomatik ravishda hujjatlar yaratadigan vositalardan foydalanishni o'ylab ko'ring)
• Tokenlarga o'zgartirishlar kiritishni so'rash va tasdiqlash jarayonini o'rnatish. (Markazlashtirilgan dizayn tizimi repozitoriysi bu bilan yordam beradi)
• Tokenlaringizni barcha platformalar va brauzerlarda to'g'ri ishlashini ta'minlash uchun sinovdan o'tkazish.

Kross-platform Mulohazalari

Kross-platform dizayn tizimini yaratishda quyidagilarni hisobga oling:

• Platformaga Xos Uslublar: Dizayn tokenlari umumiy asosni ta'minlasa-da, sizga platformaga xos uslublar o'zgartirishlari kerak bo'lishi mumkin (masalan, iOS va Android-da har xil tugma uslublari). Ushbu o'zgarishlarni platformaga qarab qo'llash uchun kodingizda shartli mantıqdan foydalaning.
• Komponent Kutubxonalari: Dizayn tokenlarini qo'llab-quvvatlaydigan UI komponent kutubxonalarini tanlang yoki ulardan foydalanadigan o'zingizning maxsus komponentlaringizni yarating. React Native Elements, Flutter vidjetlari va boshqalar kabi kutubxonalar kross-platform UI ishlab chiqishni osonlashtiradi.
• Qulaylik (Accessibility): Tokenlaringiz yetarli rang kontrasti va to'g'ri semantik HTML kabi qulaylik xususiyatlarini qo'llab-quvvatlashini ta'minlang. Ilovangizni ekran o'qish dasturlari va boshqa yordamchi texnologiyalar bilan sinab ko'ring.
• Mavzulashtirish va Qorong'u Rejim: Dizayn tokenlaringizdan foydalanib, mavzulashtirish imkoniyatlarini joriy qiling. Yorug' va qorong'u rejimlar uchun turli xil token qiymatlari to'plamlarini yarating va ular o'rtasida dinamik ravishda almashib turing.
• Responsiv Dizayn: To'xtash nuqtalari (breakpoints) va masofalar kabi responsiv dizayn qiymatlarini boshqarish uchun dizayn tokenlaridan foydalaning. Bu turli xil ekran o'lchamlari va qurilmalarda izchil maketni ta'minlaydi.
• Mahalliylashtirish va Internatsionalizatsiya (i18n): Dizayn tokenlari bir nechta tillarni qo'llab-quvvatlash qobiliyatingizni yaxshilashi mumkin. Matn satrlarini dizayn qiymatlaridan ajrating. Masofalar va o'lchamlarni aniqlash uchun dizayn tokenlaridan, matnni boshqarish uchun esa i18n dan foydalaning. Mahalliy xususiyatlarga moslashtirishni o'ylab ko'ring.

Ilg'or Texnikalar va Eng Yaxshi Amaliyotlar

• Token Taxalluslari (Aliases): O'qish qulayligi va qo'llab-quvvatlashni yaxshilash uchun tokenlaringiz uchun taxalluslar (yoki semantik nomlar) yarating. Masalan, rangning hex qiymatiga to'g'ridan-to'g'ri murojaat qilish o'rniga, siz color-button-background kabi tokenni yaratishingiz mumkin, bu asosiy brend rangiga ishora qiladi. Bu yana bir abstraksiya qatlamini qo'shadi va dizayn niyatini tushunishni osonlashtiradi.
• Semantik Tokenlar: Asosiy rang va masofalardan tashqariga chiqing. Ma'noni ifodalash uchun color-text-link, spacing-section-padding yoki font-weight-heading kabi semantik tokenlarni aniqlang. Bu aniqlikni yaxshilaydi va kontekstga asoslangan uslublash imkonini beradi.
• Token Merosi va Kompozitsiyasi: Tokenlarga boshqa tokenlardan qiymatlarni meros qilib olishga ruxsat bering. Masalan, border-radius-button tokeni umumiy border-radius-medium tokenidan meros olishi mumkin. Bu sizning tokenlaringizga DRY (O'zingizni Takrorlamang) tamoyillarini qo'llash imkonini beradi.
• Avtomatlashtirilgan Hujjatlar: Dizayn tokenlaringiz uchun, jumladan ularning qiymatlari, ishlatilishi va munosabatlari uchun avtomatik ravishda hujjatlar yaratadigan vositalardan foydalaning. Bu hujjatlaringizni dolzarb va barcha jamoa a'zolari uchun ochiq saqlaydi. Style Dictionary, Figma Tokens kabi vositalarda hujjatlarni yaratish xususiyatlari mavjud.
• Tokenlaringizni Versiyalash: Dizayn token ta'riflaringizni boshqarish uchun versiyalarni boshqarish tizimidan (masalan, Git) foydalaning. Bu sizga o'zgarishlarni kuzatish, oldingi versiyalarga qaytish va jamoangiz bilan samarali hamkorlik qilish imkonini beradi.
• Dizayn Tizimini Boshqarish: Dizayn tizimingizni, shu jumladan dizayn tokenlaringizni boshqarish va yangilash uchun aniq ko'rsatmalar o'rnating. Bu nomuvofiqliklarning oldini oladi va dizayn tizimingizning uzoq muddatli muvaffaqiyatini ta'minlaydi.
• Iterativ Takomillashtirish: Kichikdan boshlang va dizayn token tizimingizni iterativ ravishda takomillashtiring. Har bir tokenni oldindan aniqlashga harakat qilmang. Loyihangiz rivojlanishi bilan tokenlashtirishni talab qiladigan dizayn elementlarini aniqlang va asta-sekin ko'proq tokenlar qo'shing.

Global Ilovalar: Xalqaro Auditoriya Uchun Mulohazalar

Global auditoriya uchun ilovalar yaratishda dizayn tokenlari mahalliylashtirilgan va inklyuziv foydalanuvchi tajribasini ta'minlashda hal qiluvchi rol o'ynaydi. Ushbu omillarni hisobga oling:

• Rang va Madaniyat: Ranglarning ma'nolari madaniyatlar bo'yicha sezilarli darajada farq qilishi mumkin. Sizning brendingiz ma'lum bir ranglar palitrasidan foydalanishi mumkin, ammo u barcha foydalanuvchilar uchun bir xil ta'sir ko'rsatmasligi mumkin. Siz foydalanuvchining joylashuviga qarab ranglardan foydalanishni moslashtirishingiz kerak bo'lishi mumkin (masalan, turli mintaqalardagi tugmalar uchun har xil ranglardan foydalanish, mahalliy madaniy afzalliklarni hisobga olgan holda).
• Tipografiya va Til: Turli tillar turli shrift oilalari va belgilar to'plamini talab qiladi. Sizning dizayn tizimingiz turli tillarni qamrab olish uchun bir nechta shrift oilalarini qo'llab-quvvatlashi kerak. Matn yo'nalishiga (masalan, arab va ibroniy kabi o'ngdan chapga yoziladigan tillar) e'tibor bering va UI-ingiz mos ravishda moslashishini ta'minlang. Tipografiya tokenlaringiz buni hisobga olishini ta'minlang.
• Masofa va Maket: Matnning kengayishi va tarjimasi maketga qanday ta'sir qilishi mumkinligini o'ylab ko'ring. UI-ingizni turli tillardagi uzunroq matn satrlariga moslasha oladigan moslashuvchan masofalar va maket bilan loyihalashtiring. Shrift o'lchamlari va masofalar uchun nisbiy birliklardan (masalan, em, rem) foydalaning.
• Sana va Vaqt Formatlari: Turli mamlakatlar har xil sana va vaqt formatlaridan foydalanadi. Ilovangiz ushbu formatlarni to'g'ri ko'rsatish uchun foydalanuvchining joylashuviga dinamik ravishda moslashishi kerak.
• Valyuta va Raqam Formatlari: Foydalanuvchi mintaqasi uchun mos valyuta va raqam formatlaridan foydalaning. Agar kerak bo'lsa, bir nechta valyutani qo'llab-quvvatlashni ko'rib chiqing.
• Qulaylik va Inklyuzivlik: Dizayn tizimingiz nogironligi bo'lgan foydalanuvchilar uchun qulay va inklyuziv ekanligiga ishonch hosil qiling. Yetarli rang kontrastini ta'minlang, to'g'ri semantik HTML-dan foydalaning va UI-ingiz ekran o'qish dasturlari bilan navigatsiya qilinishini ta'minlang. Turli yordamchi texnologiyalar bilan sinab ko'ring.
• Mintaqaviy O'zgarishlar: Hatto bir til yoki mamlakat ichida ham dizayn afzalliklari yoki terminologiyasida mintaqaviy o'zgarishlar bo'lishi mumkin. Ma'lum bir mintaqa yoki maqsadli demografiyaga qarab UI-ingizni moslashtirishga tayyor bo'ling. Masalan, Amerika Qo'shma Shtatlarida ishlatiladigan vizual uslublar va kontent Buyuk Britaniya yoki Avstraliyada ishlatiladiganlardan farq qiladi.
• Foydalanuvchi Fikr-mulohazalari: Turli mintaqalardagi foydalanuvchilarning ehtiyojlari va afzalliklarini tushunish uchun ulardan fikr-mulohazalarni to'plang. Turli dizayn variantlarini baholash va UI-ingizni global auditoriya uchun optimallashtirish uchun A/B testlaridan foydalaning.

Dizayn Tokenlari Uchun Vositalar va Resurslar

Bir nechta vositalar va resurslar sizning dizayn tokenlari ish jarayonini soddalashtirishi mumkin:

• Style Dictionary: Dizayn tokenlarini turli formatlarga aylantirish uchun mashhur va moslashuvchan JavaScript kutubxonasi.
• Theo: Dizayn tokenlarini boshqarish uchun yana bir kuchli JavaScript kutubxonasi.
• Figma Tokens: Dizayn tokenlarini boshqarish va eksport qilish uchun Figma plagini.
• zeroheight: Dizayn tizimlarini, shu jumladan dizayn tokenlarini yaratish va qo'llab-quvvatlash uchun platforma.
• Design Token Format & Style Guide: Dizayn tokenlarini aniqlash uchun standart spetsifikatsiya.
• Adobe XD: Adobe XD UI dizaynlariga yordam berish uchun dizayn tokenlari bilan integratsiyalashgan.
• Ant Design, Material UI va boshqa dizayn tizimlari: Tokenlarga asoslangan tizimlarga ega kutubxonalar va freymvorklar.

Xulosa

Dizayn tokenlarini joriy qilish mustahkam, kengaytiriladigan va qo'llab-quvvatlanadigan kross-platform dizayn tizimini yaratishda muhim qadamdir. Tokenlaringizni ehtiyotkorlik bilan aniqlab, to'g'ri texnologiyani tanlab va ularni kodingizga integratsiya qilib, siz barcha ilovalaringizda izchil va samarali UI yaratishingiz mumkin, va global mulohazalarni hisobga olgan holda, ilovalaringiz turli madaniyatlarga mansub foydalanuvchilar bilan rezonanslashishini ta'minlashingiz mumkin. Dizayn tokenlariga asoslangan yondashuvni qabul qilish mavzulashtirishni, moslashtirishni va hamkorlikni soddalashtiradi, dizayn va ishlab chiqish jamoalariga global miqyosda ajoyib foydalanuvchi tajribasini taqdim etish imkonini beradi. Raqamli landshaft rivojlanishda davom etar ekan, dizayn tokenlari bilan mustahkamlangan yaxshi aniqlangan dizayn tizimining ahamiyati faqat ortib boradi. Global ilovalaringiz uchun izchil va kengaytiriladigan dizayn tizimining afzalliklarini ochish uchun bugunoq dizayn tokenlari sayohatingizni boshlang.